<template>
	<view class="container">
		<top-back-navbar position="fixed" title="认种沉香树" background="#003563" color="#fff"></top-back-navbar>
		<cxsytabbars :current="2"></cxsytabbars>
		<view class="" style="width: 100vw;">
			<view class="hander">
				<view class="" style="width:100%;text-align: center;color: #fff;font-size: 20px;">
					认种积分
				</view>
				<view class="" style="width:100%;text-align: center;color: #fff;font-size: 22px;">
					{{qianbao_data.za_chenxiang}}
				</view>
			</view>
		</view>
		<view class="" style="width: 100vw;padding: 20upx;">
			<view class="box">
				<view class="box_hander">
					<view class="" style="width: 40%;border-bottom: 2px solid #fff;font-size: 18px;">
						<input v-model="num" @input="handleInput" class="input" placeholder="输入认种数量" />
					</view>

					<view class="" style="font-size: 18px;">
						消耗
					</view>
					<view class="" style="width: 20%;border-bottom: 2px solid #fff;text-align: center;font-size: 18px;">
						{{set_jifen()}}
					</view>
					<view class="" style="font-size: 18px;">
						认种积分
					</view>
				</view>
				
				<!-- <view class="" style="display: flex;margin: 60upx 0 ; color: #fff;align-items: center;">
					<view class="">
						<checkbox-group name="" @change="get_check_value" >
								<checkbox value="1" />
						</checkbox-group>
					</view>
					<view class="" style="font-size: 18px;" @click="toqianming">
						请详细阅读认种协议并签名同意
					</view>
				</view> -->
				<view class="button" @click="set_shu">
					
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nonBreakingSpace: '\u00A0\u00A0\u00A0',
				openid: '',
				qianbao_data: {
					chenxiangshu: 0,
					za_chenxiang: 0
				},
				num: '',
				rade:false

			};
		},
		onShow: function(e) {
			

			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					
					_this.openid = id
					_this.get_data()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
			
		},
		methods: {
			toqianming(){
				uni.navigateTo({
					url:'/pagesZA/qianbao/xieyiqianming'
				})
			},
			get_check_value(e){
				
				if(e.detail.value[0]){
					this.rade=true
				}else{
					this.rade=false
				}
				
			},
			set_jifen(){
				return this.num*this.qianbao_data.chenxiangshu
			},
			handleInput(event) {
				// 使用正则表达式过滤非数字字符
				const sanitizedValue = event.detail.value.replace(/\D/g, '');

				// 更新输入框的值
				this.num = sanitizedValue;
			},
			get_data() {
				var openid = this.openid
				
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cxrz_index&app=1&type=za&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
					
						if (code == 1) {
							uni.showToast({
								icon:'none',
								title:data.message,
								success() {
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
								}
							})
							
						} else {
							this.qianbao_data = data
						}
						
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			set_shu(){
				var _this=this
				if(this.num == ''){
					uni.showToast({
						icon:'none',
						title:'请先填写数量'
					})
					return
				}
				uni.showModal({
					icon:'none',
					title:`确认认种${this.num}沉香树吗?`,
					success(res) {
						// console.log(res);
						if(res.confirm){
							_this.set_shu_sure()
						}
					}
				})
			},
			set_shu_sure(){
				var num = this.num
				// if(this.rade==false){
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:'请先同意用户协议'
				// 	})
				// 	return
				// }
				var openid = this.openid
				var _this=this
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cxrz_submit&app=1&type=za&openid=' +
						openid+'&num='+ num,
				
					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.showToast({
								icon:'none',
								title:data.message,
								
							})
						} else {
							uni.showToast({
								icon:'none',
								title:data.message,
								success() {
									setTimeout(()=>{
										_this.get_data()
									},1500)
								}
							})
							
						}
						console.log(data);
					},
					fail: () => {},
					complete: () => {
					
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}


	.container {
		height: 100vh;
		background: url('/static/images/home/za_qianbao_bg.png') 0 0 repeat;
		background-size: 100% 100%;
	}

	.hander {
		width: 100%;
		height: 20vh;
		background: url('/static/images/home/za_cxrz_hander.png') 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	.box {
		width: 100%;
		height: 20vh;
		background: url('/static/images/home/za_cxrz_box.png') 0 0 no-repeat;
		background-size: 100% 100%;
		padding: 40upx;

		.box_hander {
			width: 100%;
			display: flex;
			color: #fff;
			justify-content: space-around;
		}

		.input {
			text-align: center;
			font-size: 20px;
		}
		.button{
			width: 50%;
			height: 5vh;
			background: url('/static/images/home/za_cxrz_button.png') 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 60upx auto;
		}
	}
</style>